Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

fix(popper): flickering#1434

Merged
bmdalex merged 12 commits intomasterfrom
fix/popper-flickering
May 31, 2019
Merged

fix(popper): flickering#1434
bmdalex merged 12 commits intomasterfrom
fix/popper-flickering

Conversation

@bmdalex
Copy link
Collaborator

@bmdalex bmdalex commented May 31, 2019

fix(popper): flickering

Fixes #1415
Fixes #1361

Description

Popup content jumps for a split second when opening.

Perform the following steps to reproduce the problem:

Expected Result

Popup opens without jump

Actual Result

Popup has a small but noticeable jump when opening (see gif below) 💣

popup

Proposed fix

Create the PopperJS instance earlier, aka immediately after we get a ref to the children prop that the popper.js box is going to display:

<Ref
  innerRef={contentElement => {
    contentRef.current = contentElement
    createInstance() // create `PopperJS` instance here !! 
  }}
>
  {child as React.ReactElement}
</Ref>

Loading
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@levithomason levithomason Awaiting requested review from levithomason levithomason is a code owner

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny miroslavstastny is a code owner

@mnajdova mnajdova Awaiting requested review from mnajdova

2 more reviewers

@kuzhelov kuzhelov kuzhelov approved these changes

@layershifter layershifter layershifter approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@bmdalex bmdalex

Labels

🧰 fix Introduces fix for broken behavior. 🚀 ready for review

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Popup content jumps for a split second when opening Inline popup cause wrong popup rendering

4 participants

@bmdalex @kuzhelov @layershifter @kuzhelov-ms